<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script>
    // 第二章  Vue 基础语法/2-5 常用模板语法讲解(1)/index.html
    // 生命周期函数：在某一个时刻会自动执行的函数
    // const app = Vue.createApp({
    //     data() {
    //         return {
    //             message: 'Hello world',
    //             show: false
    //         };
    //     },
    //     template: `<div v-if="show">{{message}}</div>`
    // });
    // const vm = app.mount('#root')




    // 第二章  Vue 基础语法/2-5 常用模板语法讲解(2)
 // 生命周期函数：在某一个时刻会自动执行的函数
 const app = Vue.createApp({
        data() {
            return {
                message: 'Hello world',
                name: 'title',
                event: 'mouseenter'
            };
        },
        methods: {
            handleClick() {
                alert("哈哈哈")
            }
        },
        template: `
        <form action="https://www.baidu.com" @click.prevent="handleClick">
            <button type="submit">提交</button>    
        </form>
        <div 
        @[event]="handleClick"
        :[name]="message"
        >{{message}}</div>`
    });
    // vm 代表的就是 Vue 应用的根组件
    const vm = app.mount('#root')
</script>